<!--会员注册组件-->
<template>
	<div class="fat">
		<div class="fat_input">
			<input class="wrap_input1" v-model='Uesrname' type="text" @change="phone" placeholder="请输入手机号" />
			<em>⚠ 手机号码不正确,请重新输入️</em>
			<input class="Password" v-model='Password' type="password" placeholder="请输入密码(6-20个字符)" />
			<input class="SPassword" v-model='SPassword' type="pasword" placeholder="请再次输入密码" />
			<textarea type="text" placeholder="验证码" /></textarea>
			<a href="###">看不清换一张</a>
			<input type="text" placeholder="手机验证码" />
			<button class="get" placeholder=''>获取验证码</button>
		</div>
		<div class="select">
			<input type="radio" name="" id="" value="" />
			<span>我已阅读并同意《礼拜五用户协议》</span>
		</div>
		<button class="button1" @click="Enroll">注册</button>
		<button class="button2" @click="Entry">登录</button>
	</div>
</template>

<script>
	export default {
		name: 'Vip',
		data(){
			return{
				Uesrname:'',
				Password:'',
				SPassword:''
			}
		},
		methods:{
			phone:function(){
					var a = /^[1][3,4,5,7,8][0-9]{9}$/;
					if(this.Uesrname==""){
					alert("手机号不能为空")
					return;
				}else{
					//当手机号格式不正确时
					if(!a.test(this.Uesrname)){			
					$(".fat_input em").show();
					return;
					}else{
						$(".fat_input em").hide();
						return;
					}
				}
			},
			Enroll:function(){
				//输入手机号
				//手机号为空时,正则表达式
				//判断密码
				if(this.Password==''){
					alert("密码不能为空")
					return;
				}else{
					//有内容并且要求6-20个字符
					if(!(this.Password.length>5 && this.Password.length<20)){
						alert("请输入6-20位字符")
						return;
					}
				}
				//先获取上一个输入框密码的值
					//有内容并且要求6-20个字符
					if(this.SPassword!==this.Password){
						alert("密码输入不一致,请重新输入")
					}

				var _this = this;
				
				this.axios.get('/api/zhuce',{params:{
					username:_this.Uesrname,
					password:_this.Password
				}})
				.then(function(data){
					if(data.data.err==2){
						alert("用户名已存在")
					}else if(data.data.err=1){
						alert("注册成功")
						window.location.href="#/FirstPage"
					}else{
						alert("注册失败")
					}
				})
				this.$store.commit('phone',{phone:_this.Uesrname})
				console.log(this.$store.state.person[0].phone)
			},
			Entry:function(){
			window.location.href='#/Enter'
			}
		}
	}
</script>

<style scoped>
	.fat {
		width: 386px;
		height: 470px;
		background: white;
		border-left: 2px solid darkgray;
		position: absolute;
		right: 253px;
		top: 95px;
		padding-top: 30px;
	}
	em {
		font-style: normal;
		color: red;
		font-size: 14px;
		margin-left: 36px;
		position: absolute;
		top: 83px;
		left: 0;
		display: none;
	}
	
	textarea {
		width: 112px;
		height: 44px;
		line-height: 44px;
		font-size: 17px;
		margin-left: 35px;
		padding-left: 10px;
		margin-right: 20px;
		margin-bottom: 17px;
		color: #999999;
		background: #f9f9f9;
	}
	
	.fat_input input {
		width: 307px;
		height: 44px;
		line-height: 44px;
		font-size: 17px;
		margin-left: 35px;
		margin-bottom: 26px;
		padding-left: 10px;
		background: #f9f9f9;
		color: #999999;
	}
	
	a {
		width: 80px;
		height: 34px;
		background: url(../../assets/image/yzm.jpg) no-repeat;
		background-size: 60px 34px;
		padding-left: 70px;
		vertical-align: 36px;
		color: #f4a140;
		font-weight: 100;
	}
	
	.select input {
		margin-left: 34px;
		margin-right: 10px;
		vertical-align: 2px;
	}
	
	.get {
		width: 100px;
		height: 32px;
		line-height: 32px;
		font-size: 14px;
		color: white;
		background: #498e3d;
		position: absolute;
		top: 331px;
		right: 35px;
	}
	
	button {
		width: 135px;
		height: 45px;
		font-size: 20px;
		border-radius: 5px;
		color: white;
		font-weight: 100;
	}
	
	.button1 {
		background: #f08200;
		margin: 20px 51px 0px 33px;
	}
	
	.button2 {
		background: #498e3d;
	}
</style>